<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音乐播放器</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
    #searchForm { margin-bottom: 20px; }
    #searchInput { width: 300px; padding: 8px; font-size: 16px; }
    #searchButton { padding: 8px 16px; font-size: 16px; }
    #results { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
    .track { width: 200px; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; }
    .track img { width: 100%; height: 200px; object-fit: cover; }
    .track-info { padding: 8px; text-align: left; }
    .track-info h4 { margin: 4px 0; font-size: 16px; }
    .track-info p { margin: 2px 0; font-size: 14px; color: #555; }
    .play-button { display: block; width: 100%; padding: 8px; background: #007bff; color: #fff; text-align: center; text-decoration: none; cursor: pointer; }
    .play-button:hover { background: #0056b3; }
    audio { margin-top: 20px; width: 100%; outline: none; }
  </style>
</head>
<body>
  <h1>音乐播放器</h1>
  <form id="searchForm">
    <input id="searchInput" type="text" placeholder="搜索歌曲或艺术家" required />
    <button id="searchButton" type="submit">搜索</button>
  </form>

  <div id="results"></div>

  <audio id="audioPlayer" controls></audio>

  <script>
    const form = document.getElementById('searchForm');
    const input = document.getElementById('searchInput');
    const results = document.getElementById('results');
    const audioPlayer = document.getElementById('audioPlayer');

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const query = encodeURIComponent(input.value.trim());
      if (!query) return;
      results.innerHTML = '<p>加载中...</p>';
      try {
        const response = await fetch(`https://itunes.apple.com/search?term=${query}&media=music&limit=20`);
        const data = await response.json();
        displayResults(data.results);
      } catch (err) {
        results.innerHTML = '<p>搜索出错，请重试。</p>';
        console.error(err);
      }
    });

    function displayResults(tracks) {
      results.innerHTML = '';
      if (!tracks.length) {
        results.innerHTML = '<p>未找到相关歌曲。</p>';
        return;
      }
      tracks.forEach(track => {
        const div = document.createElement('div');
        div.className = 'track';
        div.innerHTML = `
          <img src="${track.artworkUrl100.replace('100x100','200x200')}" alt="${track.trackName}" />
          <div class="track-info">
            <h4>${track.trackName}</h4>
            <p>${track.artistName}</p>
          </div>
          <div class="play-button" data-preview="${track.previewUrl}">▶ 播放预览</div>
        `;
        results.appendChild(div);
      });
      // 绑定播放事件
      document.querySelectorAll('.play-button').forEach(btn => {
        btn.addEventListener('click', () => {
          const url = btn.getAttribute('data-preview');
          audioPlayer.src = url;
          audioPlayer.play();
        });
      });
    }
  </script>
</body>
</html>
